<template>
    <view>
        <view :class="{ 'multi-text-wrap': !openInstruction }">
            <view
              v-if="
                !openInstruction && showData.length > 59
              "
              class="multi-text-btn"
              @click="openInstructionFun"
            >
                展开
                <uni-icons
                    type="forward"
                    color="rgba(170, 84, 19, 1)"
                    size="12"
                ></uni-icons>
            </view>
            <view class="content-list">
              {{showText}}
              <text v-if="!openInstruction && showData.length > 59">...</text>
            </view>
        </view>
        <!-- <view class="content-list">{{ showText }}</view> -->
    </view>
</template>

<script>

export default {
    props: {
        showData: { // 总文字
            type: String
        },
        isBack: { // 用于判断是否显示展开按钮，1为显示，其他为不显示
            type: Number,
            default: 1,
        }
    },
    components: {

    },
    computed: {},
    data() {
        return {
            openInstruction: false, // 是否展开，但是只有总字符数量超过60时才会显示展开按钮
            showText: "", // 显示的文字
            timer:null // 计时器
        };
    },
    watch: {
        // 监听总内容变化，重新显示文字
        showData: {
            handler(newVal,oldVal) {
                console.log('newVal',newVal)
                // getTxt, 参数为播放速度
                if (this.isBack == 1) {
                    this.getTxt()
                } else {
                    setTimeout(()=>{
                        this.getTxt(20)
                    },1000)
                }
            },
            immediate:true // 立即执行
        },
    },
    onLoad() {

    },
    methods: {
        getTxt(speed) {
            if (this.isBack == 1) {
                // 截取前60个字符，并显示
                this.showText = this.showData.substring(0, 59)
            } else {
                // 显示全部文字,并设置计时器，每speed毫秒（这个页面传的是20毫秒）显示一个字符
                let content = this.showData
                this.showText = ''
                //声明一个变量，用来监听要分割的长度
                var count = 0
                this.timer = setInterval(() => {
                    //取到content的第count位
                    this.showText = content.substr(0, count);
                    //count大于content的长度，停止计时器
                    if (count < content.length) {
                        count++
                    } else {
                        clearInterval(this.timer);
                        // return
                    }
                }, speed);
            }

        },
        openInstructionFun(){
            // 展开, 显示全部文字
            this.openInstruction = true
            this.showText = this.showData
        }

    }
};
</script>

<style lang="scss" scoped>
.content-list {
    // font-size: 28rpx;
    // color: $sl-color-grey;
    // margin: 5rpx 0;
}
.multi-text-btn {
    position: absolute;
    font-size: 24rpx;
    color: rgba(170, 84, 19, 1);
    right: 0;
    bottom: 0;
    // background: #ffffff;
    // padding-left: 30rpx;
}
.multi-text-wrap {
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    // -webkit-line-clamp: 2;
    overflow: hidden;
    position: relative;
}
</style>
